<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { useUserStore } from '../../store/userStore'
const userStore = useUserStore()

const userInfo = ref<UserModel>()

userStore.getUserInfo().then((res) => {
   userInfo.value = res.data
})
</script>

<template>
   <div class="w-screen h-screen bg-[#f2f3f5]">
      <div class="info flex items-center justify-between px-5 py-10" @click="$router.push({ name: 'me.info' })">
         <div class="flex">
            <img :src="userInfo?.avatar" alt="" class="rounded-full w-24 h-24 object-cover" />
            <div class="right h-24 p-4 flex justify-between flex-col">
               <div class="text-xl font-bold nickname">{{ userInfo?.nickname || userInfo?.username }}</div>
               <div class="data">个人说明: {{ userInfo?.hobby ? userInfo?.hobby : '暂无说明' }}</div>
            </div>
         </div>
         <div><van-icon size="20" name="arrow" /></div>
      </div>

      <div class="funList grid grid-cols-2 gap-4 justify-center">
         <div class="item" @click="$router.push({ name: 'me.article', params: { userId: userInfo!.id } })">
            <img src="../../assets/img/article.png" alt="" />
            <div class="title">文章</div>
            <div class="desc">管理，查看文章</div>
         </div>
         <div class="item" @click="$router.push({ name: 'me.commont', params: { userId: userInfo!.id } })">
            <img src="../../assets/img/commont.png" alt="" />
            <div class="title">评论</div>
            <div class="desc">管理，查看评论</div>
         </div>
         <div class="item" @click="$router.push({ name: 'me.star', params: { userId: userInfo!.id } })">
            <img src="../../assets/img/star.png" alt="" />
            <div class="title">收藏</div>
            <div class="desc">查看我的收藏</div>
         </div>
         <div class="item" @click="$router.push({ name: 'me.safe' })">
            <img src="../../assets/img/safe.png" alt="" />
            <div class="title">安全</div>
            <div class="desc">安全设置</div>
         </div>
      </div>
   </div>
   <div></div>
</template>

<style scoped lang="scss">
.funList {
   padding: 20px;
   padding-top: 10px;
   .item {
      @apply p-5 bg-white rounded-xl flex flex-col;
      .title {
         @apply font-bold py-2;
      }
      .desc {
         color: #adacb1;
      }
      img {
         @apply w-9 h-9;
      }
   }
}
</style>
